<template>
	<view class="wrap">
		<view class="base bw">
			<view class="title">充值金额</view>
			<view class="base-main u-flex">
				<view class="base-main_item" :class="{active: topupIndex == index}" v-for="(item,index) in topupList"
					:key="index" @click="onTopupItemTap(index)">￥{{item.value}}</view>
			</view>
		</view>
		<view class="custom bw">
			<view class="title">其他充值金额</view>
			<view class="custom-main">
				<!-- <text>￥</text> -->
				<input v-model="inputNum" @input="onMoneyInput" type="number" placeholder="请输入充值金额"
					placeholder-class="app_phc">
			</view>
		</view>
		<view class="payWay bw">
			<view class="title">支付方式</view>
			<view class="payWay-main">
				<u-radio-group v-model="payWay" size="40">
					<view class="payWay-main_item app_flex-aicjcsb" @click="payWay = 1">
						<view class="payWay-main_itemL app_flex-aic">
							<image src="../../static/images/icon-logo-zfb.png"></image>
							<text>支付宝支付</text>
						</view>
						<u-radio name="1"></u-radio>
					</view>
					<view class="payWay-main_item app_flex-aicjcsb" @click="payWay = 2">
						<view class="payWay-main_itemL app_flex-aic">
							<image src="../../static/images/icon-logo-wx.png"></image>
							<text>微信支付</text>
						</view>
						<u-radio name="2"></u-radio>
					</view>
				</u-radio-group>
			</view>
		</view>

		<vue class="submitBar bw app_flex-aicjcsb">
			<view class="submitBar-L">充值金额：￥{{amount}}</view>
			<view class="submitBar-btn">
				<g-btn title="充值" :customstyle="{width: '200rpx', height: '70rpx'}" @click="confirmTap"></g-btn>
			</view>
		</vue>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payWay: 1,
				topupIndex: 0,
				topupList: [{
					value: 300
				}, {
					value: 500
				}, {
					value: 1000
				}, {
					value: 2000
				}],
				amount: 0,
				inputNum: ''
			}
		},
		onLoad(options) {
			this.amount = this.topupList[this.topupIndex].value
		},
		methods: {
			onTopupItemTap(index) {
				this.topupIndex = index
				this.inputNum = ''
				this.amount = this.topupList[this.topupIndex].value
			},
			onMoneyInput(e) {
				this.amount = e.detail.value
			},
			getOpenid() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: (res) => {
							resolve(res.authResult.openid)
						},
						complete(res) {
							console.log(res);
						}
					})
				})
			},
			/**
			 * 充值按钮
			 */
			async confirmTap() {
				try {
					let reqParams = {
						amount: this.amount,
						payType: this.payWay,
					}
					// reqParams.openid = 'oubh959FniprbS2guWe9_QqhBhVc'
					if (this.payWay == 2) {
						reqParams.openid = await this.getOpenid()
					}
					console.log(reqParams);
					this.$g_api.promotionBalanceAdd(reqParams).then(async ({
						data
					}) => {
						console.log(data);
						try {
							if (data) {
								if (this.payWay == 1) { // 支付宝
									await this.$g_pay.requestPayment({
										provider: 'alipay',
										orderInfo: data.orderInfo
									})
								} else if (this.payWay == 2) { // 微信支付
									// await this.$g_pay.requestPayment(data)
									await this.$g_pay.requestPayment({
										provider: 'wxpay',
										orderInfo: JSON.stringify(data)
									})
								}
							} else {
								throw '充值失败'
							}
							uni.$emit('update-dataBoard')
							uni.showToast({
								title: '充值成功'
							})
						} catch (err) {
							console.log(err);
							uni.showToast({
								title: err,
								icon: 'none'
							})
						}
					}).catch(err => {
						console.log(err);
					})
				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.base {
		padding-top: 40rpx;
	}

	.title {
		padding-left: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.base-main {
		flex-wrap: wrap;
		padding: 30rpx 0rpx 40rpx 30rpx;
	}

	.base-main_item {
		margin-right: 28rpx;
		padding: 20rpx 28rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		border: 1px solid #ccc;
		box-sizing: border-box;

		&.active {
			border: 0;
			color: #fff;
			background-color: $g-main-color;
		}
	}

	.custom {}

	.custom-main {
		padding: 0 30rpx 30rpx;

		input {
			height: 100rpx;
			line-height: 100rpx;
			position: relative;
			display: inline-block;
			font-size: 36rpx;
			padding-left: 40rpx;
			border-bottom: 1px solid #e6e6e6;

			&::before {
				position: absolute;
				left: 0;
				top: 6rpx;
				content: '￥';
				font-size: 30rpx;
			}
		}
	}

	.payWay {
		margin-top: 20rpx;
		padding-top: 30rpx;
	}

	.payWay-main {
		margin-top: 40rpx;
		overflow: hidden;
	}

	.payWay-main_item {
		width: 690rpx;
		height: 100rpx;
		padding-left: 40rpx;
		margin: 0 auto 40rpx;
		font-size: 0;
		border-radius: 50rpx;
		border: 1px solid #ccc;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 28rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.submitBar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.submitBar-L {
		margin-left: 30rpx;
		font-size: 30rpx;
	}

	.submitBar-btn {
		margin-right: 30rpx;
	}
</style>